<template>
  <div>
    <el-container
      style="height: 100vh; margin: 0; padding: 0; border: 1px solid #eee"
    >
      <!-- 顶部导航栏 -->
      <el-header
        style="
          background-color: #b3c0d1;
          color: #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
        "
      >
        <!-- 顶部导航栏的左侧内容 -->

        <h3>学生宿舍管理系统</h3>

        <!-- 顶部导航栏的右侧内容，登录相关 -->

        <div class="top-right">
          <el-button type="text">{{ name }}</el-button>

          <el-button type="text"></el-button>
          <el-avatar :size="size" :src="user.avatar"></el-avatar>

          <el-button type="text"></el-button>
          <el-button type="text" @click="exit">退出</el-button>
        </div>
      </el-header>

      <el-container style="height: calc(100% - 60px); /* 减去header的高度 */">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <!-- 普通用户的功能  -->
            <el-menu-item @click="clickStudentManagement"
              >学生管理</el-menu-item
            >

            <el-menu-item @click="clickDormitoryManagement"
              >宿舍管理</el-menu-item
            >

            <el-menu-item @click="clickDormitoryManagementBuilding"
              >宿舍楼管理</el-menu-item
            >
            <el-menu-item @click="clickStudentComeAndOut"
              >学生出入信息查询</el-menu-item
            >
          </el-menu>
        </el-aside>

        <!-- 公共的 -->
        <el-main
          style="
            overflow: auto;
            width: 100%;
            display: flex;
            flex-direction: column;
          "
        >
          <div class="container">
            <!-- 选择器 -->
            <el-select v-model="sort" placeholder="筛选">
              <el-option
                v-for="item in sortOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 搜索的盒子 -->
            <div style="display: flex; align-items: center">
              <el-button
                v-if="needTest"
                type="primary"
                @click="test"
                style="width: 80px; cursor: pointer"
                >测试</el-button
              >
              <!-- 学生-触发按钮 -->
              <el-button
                v-if="show == 1"
                type="primary"
                @click="handleAddStudent"
              >
                <i class="el-icon-plus"></i>
                添加学生</el-button
              >

              <!-- 学生-弹窗 -->
              <el-dialog
                v-if="show == 1"
                title="学生"
                :visible.sync="studentDialogVisible"
                width="30%"
              >
                <el-form :model="studentInfo" label-width="120px">
                  <el-form-item label="学号">
                    <el-input
                      v-model="studentInfo.studentNumber"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="姓名">
                    <el-input v-model="studentInfo.name"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-select
                      v-model="studentInfo.gender"
                      placeholder="请选择性别"
                    >
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                      <!-- 可以根据需要添加更多选项 -->
                    </el-select>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <el-input-number
                      v-model="studentInfo.age"
                      :min="1"
                      label="年龄"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="院系">
                    <el-input v-model="studentInfo.department"></el-input>
                  </el-form-item>
                  <el-form-item label="年级">
                    <el-input-number
                      v-model="studentInfo.grade"
                      :min="1"
                      label="年级"
                    ></el-input-number>
                  </el-form-item>

                  <!-- 楼栋选择下拉列表 -->
                  <el-form-item label="楼栋选择">
                    <el-select
                      v-model="selectedBuilding"
                      placeholder="请选择楼栋"
                    >
                      <el-option
                        v-for="item in buildingOptions"
                        :key="item.buildingId"
                        :label="item.buildingName"
                        :value="item.buildingId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 宿舍选择下拉列表，依赖于楼栋的选择 -->
                  <el-form-item label="宿舍选择">
                    <el-select
                      v-model="studentInfo.dormitoryId"
                      placeholder="请选择宿舍"
                      v-if="selectedBuilding !== null"
                    >
                      <el-option
                        v-for="item in dormitoryOptions"
                        :key="item.dormitoryId"
                        :label="item.dormitoryName"
                        :value="item.dormitoryId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitStudentForm"
                      >提交</el-button
                    >
                    <el-button @click="studentDialogVisible = false"
                      >取 消</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-dialog>

              <!-- 宿舍-触发弹窗的按钮 -->
              <el-button
                v-if="show == 2 && roleId > 1"
                type="primary"
                @click="handleAddDormitory"
                ><i class="el-icon-plus"></i> 添加宿舍</el-button
              >

              <!-- 宿舍-弹窗 -->
              <el-dialog
                title="宿舍"
                :visible.sync="dormitoryDialogVisible"
                width="30%"
                @close="handleClose"
              >
                <el-form :model="dormitoryInfo" ref="dormitoryForm">
                  <el-form-item label="宿舍名称" prop="dormitoryName">
                    <el-input
                      v-model="dormitoryInfo.dormitoryName"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="楼层" prop="floor">
                    <el-input-number
                      v-model="dormitoryInfo.floor"
                      :min="1"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="床位" prop="bedCount">
                    <el-input-number
                      v-model="dormitoryInfo.bedCount"
                      :min="1"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="单价" prop="pricePerBed">
                    <el-input-number
                      v-model="dormitoryInfo.pricePerBed"
                      :min="0"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="当前入住人数" prop="currentOccupancy">
                    <el-input-number
                      v-model="dormitoryInfo.currentOccupancy"
                      :min="0"
                    ></el-input-number>
                  </el-form-item>

                  <!-- 楼栋选择下拉列表 -->
                  <el-form-item label="楼栋选择">
                    <el-select
                      v-model="dormitoryInfo.buildingId"
                      placeholder="请选择楼栋"
                    >
                      <el-option
                        v-for="item in buildingOptions"
                        :key="item.buildingId"
                        :label="item.buildingName"
                        :value="item.buildingId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dormitoryDialogVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="submitDormitoryForm"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>

              <!-- 添加宿舍楼的按钮 -->
              <el-button
                v-if="show == 3 && roleId > 1"
                type="primary"
                @click="handleAddDormitoryBuilding"
                ><i class="el-icon-plus"></i>添加宿舍楼</el-button
              >

              <!-- 宿舍楼信息弹窗 -->
              <el-dialog
                title="宿舍楼"
                :visible.sync="dormitoryBuildingDialogVisible"
                width="30%"
                @close="handleBuildingDialogClose"
              >
                <el-form :model="dormitoryBuildingInfo" ref="buildingForm">
                  <el-form-item label="宿舍楼名称" prop="buildingName">
                    <el-input
                      v-model="dormitoryBuildingInfo.buildingName"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="宿舍数量" prop="dormitoryCount">
                    <el-input-number
                      v-model="dormitoryBuildingInfo.dormitoryCount"
                      :min="0"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="楼位置" prop="location">
                    <el-input
                      v-model="dormitoryBuildingInfo.location"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="楼层数" prop="floorCount">
                    <el-input-number
                      v-model="dormitoryBuildingInfo.floorCount"
                      :min="1"
                    ></el-input-number>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dormitoryBuildingDialogVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="handleSubmitBuilding"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>

              <el-input
                type="text"
                prefix-icon="el-icon-search"
                v-model="selectString"
                placeholder="搜索"
                style="width: 270px; cursor: pointer; margin: 10px"
                @enter="handleSearch"
              ></el-input>
              <!-- 这个按钮暂时不需要 -->
              <!--               <el-button
                type="primary"
                @click="handleSearch"
                style="width: 80px; cursor: pointer"
                >搜索</el-button
              > -->
            </div>
          </div>

          <!-- 功能-学生管理 -->
          <el-table
            v-if="show == 1"
            :data="students"
            style="width: 100%; display: block"
          >
            <el-table-column
              v-if="user.roleId >= 1"
              prop="name"
              label="姓名"
              width="120"
            ></el-table-column>
            <el-table-column
              v-if="user.roleId >= 1"
              prop="studentNumber"
              label="学号"
              width="120"
            ></el-table-column>
            <el-table-column
              v-if="user.roleId >= 1"
              prop="dormitoryName"
              label="宿舍"
              width="120"
            ></el-table-column>
            <el-table-column
              v-if="user.roleId >= 1"
              prop="gender"
              label="性别"
              width="120"
            ></el-table-column>

            <el-table-column
              v-if="user.roleId >= 1"
              prop="age"
              label="年龄"
              width="120"
            ></el-table-column>

            <el-table-column
              v-if="user.roleId >= 1"
              prop="grade"
              label="年级"
              width="120"
            ></el-table-column>
            <el-table-column
              v-if="user.roleId >= 1"
              prop="department"
              label="院系"
              width="120"
            ></el-table-column>

            <!-- 其他列定义...（如果有的话）-->

            <el-table-column>
              <template slot-scope="scope">
                <div style="display: flex; justify-content: flex-end">
                  <el-button
                    size="mini"
                    type="warning"
                    @click="handleGoOut(scope.$index)"
                  >
                    出去</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    @click="handleComeBack(scope.$index)"
                  >
                    回来</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEditStudent(scope.$index)"
                  >
                    修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteStudent(scope.$index)"
                  >
                    删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 功能-宿舍管理(管理员才有这个功能) -->
          <el-table
            v-if="show == 2"
            :data="dormitories"
            style="width: 100%; display: block"
          >
            <el-table-column
              prop="buildingName"
              label="宿舍楼"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="dormitoryName"
              label="宿舍名"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="dormitoryId"
              label="宿舍编号"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="floor"
              label="楼层"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="bedCount"
              label="床位数"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="currentOccupancy"
              label="最多人数"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="actualOccupancy"
              label="实际人数"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="pricePerBed"
              label="单价"
              width="120"
            ></el-table-column>

            <!-- 其他列定义... -->
            <el-table-column label="">
              <template slot-scope="scope">
                <div style="display: flex; justify-content: flex-end">
                  <el-button
                    v-if="roleId > 1"
                    size="mini"
                    type="primary"
                    @click="handleEditDormitory(scope.$index)"
                    >修改</el-button
                  >
                  <el-button
                    v-if="roleId > 1"
                    size="mini"
                    type="danger"
                    @click="handleDeleteDormitory(scope.$index)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 功能-管理宿舍楼(管理员才有这个功能) -->
          <el-table
            v-if="show == 3"
            :data="dormitoryBuildings"
            style="width: 100%; display: block"
          >
            <el-table-column
              prop="buildingId"
              label="编号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="buildingName"
              label="宿舍楼"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="dormitoryCount"
              label="最大宿舍数量"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="actualDormitoryCount"
              label="已有宿舍数量"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="location"
              label="楼位置"
              width="240"
            ></el-table-column>

            <el-table-column
              prop="floorCount"
              label="楼层数"
              width="120"
            ></el-table-column>

            <!-- 其他列定义... -->
            <el-table-column label="">
              <template slot-scope="scope">
                <div style="display: flex; justify-content: flex-end">
                  <el-button
                    v-if="roleId > 1"
                    size="mini"
                    type="primary"
                    @click="handleEditBuilding(scope.$index)"
                    >修改</el-button
                  >
                  <el-button
                    v-if="roleId > 1"
                    size="mini"
                    type="danger"
                    @click="handleDeleteBuilding(scope.$index)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 功能-学生出入查看 -->
          <el-table
            v-if="show == 4"
            :data="students"
            style="width: 100%; display: block"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="studentNumber"
              label="学号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="grade"
              label="年级"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="eventTime"
              label="时间"
              width="240"
            ></el-table-column>
            <el-table-column
              prop="action"
              label="事件"
              width="120"
            ></el-table-column>

            <el-table-column
              prop="dormitoryName"
              label="宿舍"
              width="240"
            ></el-table-column>
          </el-table>

          <el-pagination
            background
            layout="prev, pager, next"
            :total="pageCount"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

const api = "http://localhost:8081";

export default {
  name: "HomeView",
  data() {
    return {
      //用户相关

      //用户名
      name: "",
      //职位
      roleId: 1,

      //分页相关
      pageCount: 100, // 总数据量
      pageSize: 10, //每页数据(10条)
      currentPage: 1, //当前页数
      sort: "desc", //排序方式

      sortOptions: [
        { value: "asc", label: "升序" },
        { value: "desc", label: "降序" },
      ],

      selectString: "", //搜索框内容

      /* 用户相关 */
      user: {
        name: "",
        avatar: "",
        roleId: 1,
        id: -1,
      },

      show: 1 /* 展示什么东西 */,
      /* 1:学生管理 */
      /* 2:宿舍管理 */
      /* 3:宿舍楼管理 */

      /* 学生管理-学生数组 */
      students: [], // 定义一个空数组来存储Student对象

      /* 宿舍楼管理-宿舍楼数组 */
      dormitoryBuildings: [],

      /* 宿舍管理-宿舍数组 */
      dormitories: [],

      /* 添加-学生表单 */
      studentInfo: {
        /* 学生id */
        studentId: -1,
        /* 学号 */
        studentNumber: "",
        /* 姓名 */
        name: "",
        /* 性别 */
        gender: "",
        /* 年龄 */
        age: 0,
        /* 院系 */
        department: "",
        /* 年级 */
        grade: 1,

        /* 特殊-宿舍id */
        dormitoryId: 0,
        /* 特殊-宿舍名称 */
        dormitoryName: "",
      },
      /* 状态: 1添加 2修改 */
      studentStatus: 1,
      /* 表单是否显示 */
      studentDialogVisible: false,
      /* 选择的楼栋 */
      selectedBuilding: 0,

      /* 添加-宿舍 */
      dormitoryInfo: {
        /* 宿舍id(不需要出现在表单选项) */
        dormitoryId: -1,
        /* 宿舍名称 */
        dormitoryName: "",
        /* 楼层 */
        floor: 0,
        /* 床位 */
        bedCount: 0,
        /* 单价 */
        pricePerBed: 0,
        /* 人数 */
        currentOccupancy: 0,
        /* 关联-宿舍楼id(不需要出现在表单选项) */
        buildingId: -1,
        /* 关联-宿舍楼名字 */
        buildingName: "",
      },
      /* 状态: 1添加 2修改 */
      dormitoryStatus: 1,
      /* 宿舍表单是否显示 */
      dormitoryDialogVisible: false,
      /* 选择的宿舍 */
      selectedDormitory: 0,

      /* 表单-有效楼栋 */
      buildingOptions: [
        // 示例楼栋信息列表
        { value: 1, label: "没有哦" },
      ],
      /* 表单-有效宿舍 */
      dormitoryOptions: [
        // 示例宿舍信息列表
        { value: 1, label: "没有哦" },
      ],

      /* 添加-宿舍楼表单 */
      dormitoryBuildingInfo: {
        /* 宿舍楼id(不需要出现在表单选项) */
        buildingId: -1,
        /* 宿舍楼名称 */
        buildingName: "",
        /* 宿舍数量 */
        dormitoryCount: 0,
        /* 楼位置 */
        location: "",
        /* 楼层数 */
        floorCount: 0,
      },
      /* 状态: 1添加 2修改 */
      dormitoryBuildingStatus: 1,
      /* 表单是否显示 */
      dormitoryBuildingDialogVisible: false,

      /* 测试按钮是否需要显示 */
      needTest: false,
    };
  },
  /* 创建时执行 */
  created() {
    //创建时
    //获取用户名
    this.name = localStorage.getItem("name");
    //获取职位
    this.roleId = localStorage.getItem("roleId");

    //获取数据
    this.getStudentData();
  },
  watch: {
    //监听楼栋变化
    selectedBuilding() {
      // 发送请求获取宿舍信息
      //alert("发送变化");
      this.sendDormitoryRequestByBuildingId();
      //this.refresh();
    },
    /* 查询字符串发送变化 */
    selectString() {
      this.refresh();
    },
    /* 排序方式发送变化 */
    sort() {
      this.refresh();
    },
  },
  methods: {
    /* <<<附加题>>> */
    /* 出去按钮 */
    handleGoOut(index) {
      //alert("出去->" + this.students[index].studentId);
      //设置目标学生id
      this.studentInfo.studentId = this.students[index].studentId;
      //发送请求
      this.sendStudentRequest("/studentOut", "记录成功");
    },
    /* 回来按钮 */
    handleComeBack(index) {
      //alert("回来->" + this.students[index].studentId);
      //设置目标学生id
      this.studentInfo.studentId = this.students[index].studentId;
      //发送请求
      this.sendStudentRequest("/studentBack", "记录成功");
    },
    /* 退出登录 */
    exit() {
      localStorage.clear();
      //返回登录界面
      this.$router.push("/login");
    },
    /* 登录 */
    login() {
      //前往登录界面
      this.$router.push({ name: "login" }); // 使用路由的名称
    },
    /* 刷新界面方法 */
    refresh() {
      // 使用setTimeout来延迟执行逻辑
      setTimeout(() => {
        // 判断show的值
        if (this.show == 1) {
          // 学生管理
          this.getStudentData();
        } else if (this.show == 2) {
          // 宿舍管理
          this.getDormitoryData();
        } else if (this.show == 3) {
          // 宿舍楼管理
          this.getDormitoryBuildingData();
        } else if (this.show == 4) {
          /* 学生出入 */
          this.getStudentData();
        } else {
          alert("不是,哥们");
        }
      }, 100); // 延迟100毫秒（即0.1秒）
    },
    /* 刷新表单方法 */
    refreshForm() {
      // 重置宿舍楼表单
      this.dormitoryBuildingInfo = {
        buildingId: -1,
        buildingName: "",
        dormitoryCount: 0,
        location: "",
        floorCount: 0,
      };

      // 重置宿舍表单
      this.dormitoryInfo = {
        dormitoryId: -1,
        dormitoryName: "",
        floor: 0,
        bedCount: 0,
        pricePerBed: 0,
        currentOccupancy: 0,
        buildingId: -1, // 注意：这个字段通常用于绑定，但在这里重置为-1也是合理的
        buildingName: "", // 注意：这个字段通常用于显示，但在表单重置时也可以清空
      };

      // 重置学生表单
      this.studentInfo = {
        studentId: -1,
        studentNumber: "",
        name: "",
        gender: "",
        age: 0,
        department: "",
        grade: 1,
        dormitoryId: 0, // 注意：这个字段可能需要根据实际情况决定是否重置为0或-1
        dormitoryName: "", // 注意：这个字段通常用于显示，但在表单重置时也可以清空
      };
    },
    /* 学生管理选项 */
    clickStudentManagement() {
      //重置页数
      this.currentPage = 1;
      //重置查询字符串
      this.selectString = "";

      //学生管理
      this.show = 1;
      //发送请求
      this.getStudentData();
      //获取有效楼栋,用于添加表单
      this.sendDormitoryBuildingRequest();
    },
    /* 宿舍管理选项 */
    clickDormitoryManagement() {
      //重置页数
      this.currentPage = 1;
      //重置查询字符串
      this.selectString = "";
      //宿舍管理
      this.show = 2;
      //发送请求
      this.getDormitoryData();
      //获取有效楼栋,用于添加表单
      this.sendDormitoryBuildingRequest();
    },
    /* 宿舍楼管理选项 */
    clickDormitoryManagementBuilding() {
      //重置页数
      this.currentPage = 1;
      //重置查询字符串
      this.selectString = "";
      //宿舍楼管理
      this.show = 3;
      //发送请求
      this.getDormitoryBuildingData();
    },
    /* <<<附加题>>> */
    /* 学生出入管理选项 */
    clickStudentComeAndOut() {
      //重置页数
      this.currentPage = 1;
      //重置查询字符串
      this.selectString = "";
      //学生进出
      this.show = 4;
      //发送请求
      this.getStudentData();
    },
    test() {
      axios
        .get(api + "/student/" + 123)
        .then((response) => {
          console.log(response.data);
          // 处理响应数据
        })
        .catch((error) => {
          console.error("请求失败:", error);
          // 处理错误
        });
      //this.getStudentData();
      //alert(this.show);
      //判断show的值
      if (this.show == 1) {
        //添加学生
      } else if (this.show == 2) {
        //添加宿舍
      } else if (this.show == 3) {
        //添加宿舍楼
      } else {
        alert("不是,哥们");
      }
      /* 测试-发送请求获取楼栋及其对应id */
      this.sendDormitoryBuildingRequest();
    },
    /* 获取学生信息 */
    getStudentData() {
      //发送请求
      const sendData = {
        /* 当前页数 */
        currentPage: this.currentPage,
        /* 每页大小 */
        pageSize: this.pageSize,
        /* 查询字符串 */
        selectString: this.selectString,
        /* 排序方式 */
        sort: this.sort,
      };
      let path = "/student";
      if (this.show == 4) {
        path = "/studentMove";
      }
      axios
        .get(api + path, {
          params: sendData,
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then((response) => {
          console.log(response.data);
          /* 跟新分页数 */
          this.pageCount = response.data.data.count;
          /* 更新学生信息 */
          this.students = response.data.data.students;
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 获取宿舍楼信息 */
    getDormitoryBuildingData() {
      //发送请求
      const sendData = {
        /* 当前页数 */
        currentPage: this.currentPage,
        /* 每页大小 */
        pageSize: this.pageSize,
        /* 查询字符串 */
        selectString: this.selectString,
        /* 排序方式 */
        sort: this.sort,
      };

      axios
        .get(api + "/dormitoryBuilding", {
          params: sendData,
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then((response) => {
          console.log(response.data);

          /* 更新数据 */
          this.pageCount = response.data.data.count;
          this.dormitoryBuildings = response.data.data.dormitoryBuildings;
          //alert("->" + response.data.data.dormitoryBuilding);
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 获取宿舍楼信息 */
    getDormitoryData() {
      //发送请求
      const sendData = {
        /* 当前页数 */
        currentPage: this.currentPage,
        /* 每页大小 */
        pageSize: this.pageSize,
        /* 查询字符串 */
        selectString: this.selectString,
        /* 排序方式 */
        sort: this.sort,
      };

      axios
        .get(api + "/dormitory", {
          params: sendData,
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then((response) => {
          console.log(response.data);

          /* 更新数据 */
          this.pageCount = response.data.data.count;
          this.dormitories = response.data.data.dormitories;
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 分页组件 */
    handleCurrentChange(val) {
      // 这里实现你的分页逻辑
      // 例如：发送请求到服务器获取第 val 页的数据
      //alert(this.currentPage + "-" + val);
      this.currentPage = val;

      //根据情况发生对应请求
      if (this.show == 1) {
        //学生
        this.getStudentData();
      } else if (this.show == 2) {
        //宿舍
        this.getDormitoryData();
      } else if (this.show == 3) {
        //宿舍楼
        this.getDormitoryBuildingData();
      } else if (this.show == 4) {
        this.getStudentData();
      } else {
        alert("不是,哥们");
      }
    },
    /* 添加学生按钮 */
    handleAddStudent() {
      this.selectedBuilding = 0; // 清空选中的宿舍楼
      //重置表单
      this.refreshForm();
      this.studentDialogVisible = true; // 显示对话框
      this.studentStatus = 1; // 设置学生状态为1
    },
    /* 添加宿舍按钮 */
    handleAddDormitory() {
      this.selectedBuilding = 0; // 清空选中的宿舍楼
      //重置表单
      this.refreshForm();
      //获取有效宿舍楼信息
      this.sendDormitoryRequestByBuildingId();
      this.dormitoryStatus = 1; // 设置宿舍状态为1
      this.dormitoryDialogVisible = true; // 显示对话框
    },
    /* 修改学生按钮 */
    handleEditStudent(index) {
      //alert("修改学生+" + index + "->" + this.students[index].studentId);
      //通过index和数组获取目标学生id->this.students[index].studentId
      //弹出表单
      this.studentDialogVisible = true;
      //状态变为修改学生
      this.studentStatus = 2;
      //更新表单数据
      this.studentInfo = this.students[index];
    },
    /* 删除学生按钮 */
    handleDeleteStudent(index) {
      //alert("删除学生+" + index + "->" + this.students[index].studentId);
      //赋值
      this.studentInfo = this.students[index];
      //alert(this.studentInfo.studentId);
      //发送请求
      this.sendStudentRequest("/deleteStudent", "删除成功");

      //刷新
      this.refresh();
    },
    /* 表单-提交添加学生 */
    submitStudentForm() {
      //alert("添加");
      //发送请求
      if (this.studentStatus == 1) {
        //添加学生
        this.sendStudentRequest("/addStudent", "添加成功");
      } else if (this.studentStatus == 2) {
        //修改学生
        this.sendStudentRequest("/updateStudent", "修改成功");
      }

      //关闭表单
      this.studentDialogVisible = false;

      //刷新
      this.refresh();
      //重置表单
      this.refreshForm();
    },
    /* 发送学生请求方法(参数为请求路径,可能是添加,可能是修改) */
    sendStudentRequest(path, msg) {
      //发送请求

      axios
        .post(api + path, this.studentInfo, {
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then(() => {
          //结果反馈添加是否成功
          this.$message({
            message: msg,
            type: "success",
          });
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 修改宿舍按钮 */
    handleEditDormitory(index) {
      //alert("修改宿舍+" + index + "->" + this.dormitories[index].dormitoryId);
      //通过index和数组获取目标宿舍id->this.dormitories[index].dormitoryId
      //弹出表单
      this.dormitoryDialogVisible = true;
      //状态变为修改宿舍
      this.dormitoryStatus = 2;
      //更新表单数据
      this.dormitoryInfo = this.dormitories[index];
      this.selectedBuilding = this.dormitories[index].buildingId;
    },
    /* 删除宿舍按钮 */
    handleDeleteDormitory(index) {
      //alert("删除宿舍+" + index + "->" + this.dormitories[index].dormitoryId);
      //赋值
      this.dormitoryInfo = this.dormitories[index];
      //alert(this.dormitoryInfo.dormitoryId);
      //发送请求
      this.sendDormitoryRequest("/deleteDormitory", "删除成功");

      //刷新
      this.refresh();
    },
    /* 表单-提交宿舍 */
    submitDormitoryForm() {
      //alert("添加");
      if (this.dormitoryStatus == 1) {
        //添加宿舍
        this.sendDormitoryRequest("/dormitory", "添加成功");
      } else if (this.dormitoryStatus == 2) {
        //修改宿舍
        this.sendDormitoryRequest("/updateDormitory", "修改成功");
      }
      //关闭
      this.dormitoryDialogVisible = false;
      //刷新
      this.refresh();
      //重置表单
      this.refreshForm();
    },
    /* 发送宿舍请求方法(参数为请求路径,可能是添加,可能是修改) */
    sendDormitoryRequest(path, msg) {
      //发送请求
      axios
        .post(api + path, this.dormitoryInfo, {
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then(() => {
          //结果反馈添加是否成功
          this.$message({
            message: msg,
            type: "success",
          });
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 发送请求通过宿舍楼id获取宿舍方法 */
    sendDormitoryRequestByBuildingId() {
      //发送请求
      axios
        .get(api + "/dormitoryByBuildingId", {
          params: {
            buildingId: this.selectedBuilding,
          },
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then((response) => {
          //alert(response.data.data);
          this.dormitoryOptions = response.data.data;
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 发送请求获取所有宿舍楼方法 */
    sendDormitoryBuildingRequest() {
      //发送请求
      axios
        .get(api + "/dormitoryBuildingAll", {
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then((response) => {
          //alert(response.data.data);
          this.buildingOptions = response.data.data;
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* 添加宿舍楼按钮 */
    handleAddDormitoryBuilding() {
      //alert("添加宿舍楼");
      //弹出表单
      //重置表单
      this.refreshForm();
      this.dormitoryBuildingDialogVisible = true;
      //状态变为添加宿舍楼
      this.dormitoryBuildingStatus = 1;
    },
    /* 修改宿舍楼按钮 */
    handleEditBuilding(index) {
      //alert("修改宿舍楼+" + this.dormitoryBuildingInfo.buildingId);
      //弹出表单
      this.dormitoryBuildingDialogVisible = true;
      //状态变为修改宿舍楼
      this.dormitoryBuildingStatus = 2;
      //更新表单数据
      this.dormitoryBuildingInfo = this.dormitoryBuildings[index];
    },
    /* 删除宿舍楼 */
    handleDeleteBuilding(index) {
      //跟新信息
      this.dormitoryBuildingInfo = this.dormitoryBuildings[index];

      //发送请求
      this.sendBuildingRequest("/deleteDormitoryBuilding", "删除成功");
      //刷新
      this.refresh();
    },
    /* 表单-提交宿舍楼 */
    handleSubmitBuilding() {
      if (this.dormitoryBuildingStatus == 1) {
        //添加宿舍楼
        this.sendBuildingRequest("/dormitoryBuilding", "添加成功");
      } else if (this.dormitoryBuildingStatus == 2) {
        //修改宿舍楼
        this.sendBuildingRequest("/updateDormitoryBuilding", "修改成功");
      }
      //关闭
      this.dormitoryBuildingDialogVisible = false;
      //刷新
      this.refresh();
      //重置表单
      this.refreshForm();
    },
    /* 发送宿舍楼请求(参数为请求路径,可能是添加,可能是修改) */
    sendBuildingRequest(path, msg) {
      //发送请求
      axios
        .post(api + path, this.dormitoryBuildingInfo, {
          headers: {
            token: localStorage.getItem("token"),
          },
        })
        .then(() => {
          //结果反馈添加是否成功
          this.$message({
            message: msg,
            type: "success",
          });
        })
        .catch((error) => {
          console.error(error);
          alert("出现异常,请联系开发人员");
        });
    },
    /* <<<附加题>>> */
    /* 学生出入请求 */
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.container {
  padding: 0px 10px 20px 10px;
  display: flex; /* 启用Flexbox */
  justify-content: space-between; /* 在元素之间平均分配空间，使它们位于容器的两端 */
  align-items: center; /* 垂直居中（如果需要） */
}

.top-right {
  /* border: #000 solid 1px; */
  display: table;
  display: flex; /* 启用Flexbox */
  justify-content: space-between; /* 子元素之间的间隔平均分布，两端对齐 */
  text-align: center; /* 水平居中 */
}
</style>
